{/* CSS,JS */}
<css href="__BOOTSTRAP__/css/bootstrap.min.css"/>
<js  href="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"/>	
<js  href="__JS__/core/jquery.rotate.min.js" />
<js  href="__PLUGS__/skitter/jquery.easing.1.3.js"/>

<style>
.row {margin:0px;}
.sitebar{
	height: 40px;
	font-size: 13px;
	line-height: 40px;
	color: #8c8c8c;
	background: #333333;
	font-weight:200;
}
.sitebar a{color:#ADADAD;cursor:pointer;text-decoration: none;}
.sitebar a:hover{color:#ffffff;}

.car-menu a{
	display:inline-block;
	float:left;
}
.car-menu a.sep{
	margin-left:10px;
	margin-right:10px;
	font-size:9px;
	color:#505050;
}
.newicon{
	display:block;
	width:40px;
	height:40px;
	background: url(__IMG__/front/new.png) no-repeat 5px 5px;
	position: absolute;top:-30px;left: 20%;
}
.car-info{
	margin-left:20px;
	width:120px;
	display: block;
	height:100%;
	background:#424242;
	z-index: 10001;
}
.car-info .icon{
	display:inline-block;
	float: left;
	width:40px;
	height:40px;
}

.car-info .icon-normal{
	background:url(__IMG__/front/car.png)  no-repeat 10px 10px;
}

.car-info .icon-selected{
	background:url(__IMG__/front/car-select.png)  no-repeat 10px 10px;
}
.car-info{
	position: relative;
}
.car-info .mycar{
	position: absolute;
	width:301px;
	border: 1px solid #0E93D7;
	z-index:10000;
	top:40px;
	left: -180px;
	background:#FFFFFF;
	display: none;
	border: 1px solid #e0e0e0;
	border-top: none;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.mycar .tips{
	display: block;
	text-align: center;
	color:#ADADAD;
}
.mycar .lookbtn{
	border: 1px solid #808080;
	display: block;
	margin:10px 50px 20px 50px;
	text-align: center;
	border-radius:5px;
	color:#aaa;
}
.mycar a.lookbtn:hover{
	color:#0E93D7;
	border:1px solid #0E93D7;
}
.menu-bar{
	height:100px;
}
.menuitem-list ul{
	margin-top:25px;
}

.menuitem-list ul{
	list-style: none;
	display: block;
}
.menuitem-list ul li{
	display: block;
	float: left;
	height:40px;
	line-height:40px;
	padding:0px 10px;
}
.menuitem-list li a{
	color:#404040;
	font-weight:590;
	text-decoration: none;
	font-size:15px;
}
.menuitem-list li a:hover{
	color:#0E93D7;
}

.search-input{
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	font-size: 14px;
	line-height: 1.42857143;
	color: #555;
	background-color: #fff;
	background-image: none;
    outline: none;
    border:none;
}
</style>


<div class="sitebar">
	<div class="w_1200 clearfix">
		<div class="fl">
			<a href="http://www.yinbaner.com">音伴尔首页</a>
		</div>
		<div class="fr car-info">
			<i class="icon icon-normal"></i>
			<a class="car" href="{:U('pass/logout')}">
				购物车
			</a>
			<div class="mycar">
				<span class="tips">
					空空如也
				</span>
				<a class="lookbtn">去逛逛吧</a>
			</div>
		</div>
		<div class="fr car-menu">
			<if condition="$Think.session.user_name neq ''">
				<a href="{:U('user/info')}">{$Think.session.user_name}</a>
				<a class="sep">|</a>
				<a href="{:U('pass/logout')}">退出</a>
			<else/>
				<a href="{:U('pass/login')}">登陆</a>
				<a class="sep">|</a>
				<a href="{:U('pass/register')}">注册</a>
			</if>			
		</div>
	</div>
</div>

<script type="text/javascript">
	var carInfo = $(".car-info");
	var carIcon = $(".car-info").find(".icon");
	var car     = $(".car-info").find(".car");
	var myCar 	= $(".mycar");
	
	carInfo.hover(function(){
		$(this).css({
			background:'#ffffff'
		});
		carIcon.removeClass("icon-normal").addClass("icon-selected");
		car.css("color","#00a1e9");
		myCar.show();
	},function(){
		$(this).css({
			background:'#424242'
		});
		carIcon.removeClass("icon-selected").addClass("icon-normal");
		car.css("color","#adadad");
		myCar.hide();
	});
	
	$(document).ready(function(){	
		
		var angel = 0;
		var isAdd = 0;
		setInterval(function(){
			if(isAdd == 0){
				angel --;
			}else{
				angel ++;
			}
			if(angel >= 30){
				isAdd = 0;
			}
			else if(angel <= -30){
				isAdd = 1
			}
			$("#newicon").rotate(angel);
		},30);
	});
</script>



<div class="menu-bar">
	<div class="w_1200 mauto clearfix" style="height:100%;">
		<div class="fl">
			<a href="http://www.yinbaner.com" class="dp mp10">
				<img src="__THEMES__/images/logo_1.png" width="120" title="返回首页" alt="音伴尔官网" />
			</a>
		</div>
		<div class="menuitem-list fl ml10">
			<ul class="clearfix">
				<li <if condition="$menu_selected eq 'first'"> class="menu_active" status="1" </if> >
					<a href="{:U('index/index')}">首页</a>
				</li>
				
				<li <if condition="$menu_selected eq 'huanjing'"> class="menu_active" status="1" </if>  >
					<a href="{:U('linian/index')}">环境教育</a>
				</li>
				
				<li <if condition="$menu_selected eq 'jiatingbao'"> class="menu_active" status="1" </if>  >
					<a href="{:U('goods/yinxiang')}">WIFI 家听宝</a>
				</li>
				
				<li <if condition="$menu_selected eq 'download'"> class="menu_active" status="1" </if>  >
					<a href="{:U('download/index')}">APP下载</a>
				</li>
				
				<li <if condition="$menu_selected eq 'qudao'"> class="menu_active" status="1" </if>  >
					<a href="{:U('retail/index')}">渠道服务</a>
				</li>
				
				<li <if condition="$menu_selected eq 'shouhou'"> class="menu_active" status="1" </if>  >
					<a href="{:U('service/index')}">售后服务</a>
				</li>
				
				<li <if condition="$menu_selected eq 'usage'"> class="menu_active" status="1" </if>  >
					<a href="{:U('service/tutorial')}">产品使用</a>
				</li>
				<li <if condition="$menu_selected eq 'about'"> class="menu_active" status="1" </if>  >
					<a href="{:U('service/aboutus')}">关于我们</a>
				</li>
				<li <if condition="$menu_selected eq 'about'"> class="menu_active" status="1" </if>  style="position:relative;">
					<a href="{:U('service/aboutus')}" style="color:red;font-weight:600;font-size:16px;">产品体验</a>
					<i id="newicon" class="newicon"></i>
					
				</li>
			</ul>
		</div>
		
		<style type="text/css">
			.search-wrap{
				position: relative;
			}
			.search-wrap .seach-normal{
				position: absolute;
				z-index: 1000;
				right:0px;
				top:0px;
				display: block;
				width:50px;
				height:50px;
				background:url(__IMG__/front/search.png) no-repeat 10px 10px;
				border:1px solid #ccc;
				margin-top:-1px;
				margin-right: -1px;
				cursor:pointer;
			}
			.search-wrap .search-hot-words{
				position:absolute;
				right: 50px;
				top:0px;
				height:50px;
				z-index: 2000;
				line-height:50px;
			}
			.search-hot-words a{
				background:#EEEEEE;
				color:#AAAAAA;
				margin-right:5px;
				text-decoration: none;
				padding:0px 5px;
			}
			.search-hot-words a:hover{
				background:#83c024;
				color:#FFFFFF;
			}
			.search-wrap .keyword-list{
				width:250px;
				border:1px solid #ccc;
				position: absolute;
				left: -1px;
				top:49px;
				border-top:none;
				z-index:9999;
				display: none;
				background:#FFFFFF;
			}
			.keyword-list li{
				display: block;
				height:40px;
				width:100%;
				line-height:40px;
			}
			.keyword-list li a{
				display: block;
				height:40px;
				font-size:12px;
				cursor:pointer;
				text-decoration:none;
				color: #404040;
				text-indent:10px;
			}
			.keyword-list li a:hover{
				background:#F5F5F5;
			}
			.keyword-list li .keyword{
				padding-left:10px;
				float: left;
			}
			.keyword-list li .result{
				color:#adadad;
				float:right;
				margin-right:10px;
			}
		</style>
		
		<div class="fr" style="height:98%;">	
			<div class="search-wrap" style="width:300px;height:50px;margin-top:25px;border:1px solid #ccc;">
				<input id="search_input" class="search-input" style="line-height:40px;width:240px;height:48px;*height:40px;_width:40px;padding:3px;"  placeholder="搜索商品">
				<div class="search-hot-words">
					<a href="">wifi音箱</a><a href="">迷你音箱</a>
				</div>
				<span class="seach-normal b"></span>
				<div id="J_keywordList b" class="keyword-list">
					<ul class="result-list" style="margin:0px;">
						<li data-key="小米手机5">
							<a href="//search.mi.com/search_%E5%B0%8F%E7%B1%B3%E6%89%8B%E6%9C%BA5">
								<span class="keyword"></span> 小米手机5<span class="result">约有8件</span>
							</a>
						</li>
						<li data-key="空气净化器2">
							<a href="//search.mi.com/search_%E7%A9%BA%E6%B0%94%E5%87%80%E5%8C%96%E5%99%A82">
								<span class="keyword"></span> 空气净化器2<span class="result">约有1件</span>
							</a>
						</li>
						<li data-key="活塞耳机">
							<a href="//search.mi.com/search_%E6%B4%BB%E5%A1%9E%E8%80%B3%E6%9C%BA">
								<span class="keyword"></span> 活塞耳机<span class="result">约有3件</span>
							</a>
						</li>
					</ul>
				</div>
			</div>	
		</div>
	</div>
</div>

<script type="text/javascript">
	//输入框
	var searchInput 	= $("#search_input");
	var searchHotWord 	= $(".search-hot-words");
	var J_keywordList 	= $("#J_keywordList");
	
	searchInput.on("click",function(){
		searchHotWord.fadeOut();
		J_keywordList.show();
	});
	
	searchInput.on("blur",function(){
		//alert("lost focust");
		searchHotWord.fadeIn();
		J_keywordList.hide();
	});
</script>












